<template>
  <div class="hello">
    <h1>hello vue-unit-test</h1>
    <h3>message：{{message}}</h3>
    <button
      class="change-btn"
      @click="click"
    >点我改变message</button>
    <button
      class="reset-btn"
      @click="message='HelloWorld'"
    >重置message</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'HelloWorld',
      count: 0
    }
  },
  mounted() {
    this.message = "HelloWorld1";
  },
  methods: {
    click() {
      if (this.count > 1) {
        this.message = 'HelloUnitTest';
      } else {
        this.message = 'HelloWorld1';
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
